const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: "none",
    // 入口模块文件
    entry: './src/main.js',
    output: {
        // 打包的结果文件存储目录
        path: path.join(__dirname, './dist/'),
        // 打包的结果的文件
        filename: 'bundle.js'
    },
    // 模块
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }, {
                // 对图片进行打包
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }, {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,// 排除的目录
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            // 用来加载vue文件
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [

        // 该插件作用是将 index.html 打包到bundle.js 所在的目录，同时也会在index.html 中自动的<scripte> 引入undle.js,
        // 但是，需要注意的是，bundle 的文件名 是根据 上面配置的output.filename 来的
        new HtmlWebpackPlugin({
            template: "./index.html"
        }),
        // 需要配合引入该对象
        new VueLoaderPlugin()

    ],
// 实现实时加载,之后在package.json 文件中 需要配置 "dev": "webpack-dev-server --open" ，表示开启热部署并且自动打开浏览器
    devServer: {
        // 可以是一个数组，然后配置多个路径
        // contentBase:[
        //
        // ]
        contentBase: path.join(__dirname, 'dist')

    }
}
;
